<template>
    <div class="login">
        <div class="login-box">
            <div class="login-title">
                <div class="content">
                    <span class="welcome">Welcome！</span><br />
                    <span class="name">微服务管理后台</span>
                </div>
            </div>
            <div class="login-form" v-loading="loading">
                <el-form ref="userRef" :model="user" :rules="rules">
                    <el-form-item prop="account" class="wrap mb25">
                        <el-input
                            type="text"
                            v-model="user.account"
                            placeholder="请输入用户名"
                        >
                            <template #prefix>
                                <i
                                    class="iconfont"
                                    :class="'icon-zhanghao1'"
                                ></i>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password" class="wrap mb25">
                        <el-input
                            type="password"
                            v-model="user.password"
                            placeholder="请输入密码"
                            @keyup.enter="handleSubmit"
                        >
                            <template #prefix>
                                <i class="iconfont" :class="'icon-mima1'"></i>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            round
                            class="form-button"
                            @click="handleSubmit"
                            style="width: 100%"
                            >登录</el-button
                        >
                    </el-form-item>
                    <div class="forgot">
                        <el-button type="primary" link @click="handleLinkForgot"
                            >忘记密码?</el-button
                        >
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
defineOptions({ name: 'Login' })
import axios from 'axios'
import { onMounted, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import { login, getLoginUser } from '@/api/common'
import { setLocalUser, getLocalUser } from '@/utils/auth'
import { ElMessage, ElMessageBox } from 'element-plus'

import md5 from 'md5'
const loading = ref(false)
const userRef = ref(null)
const user = reactive({
    account: '',
    password: ''
})
const rules = reactive({
    account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})

const handleSubmit = () => {
    userRef.value.validate(async (valid) => {
        if (valid) {
            handleLogin()
        }
    })
}
const handleLogin = async () => {
    // 创建参数对象
    const params = new URLSearchParams()
    // 添加入参
    params.append('client_id', 'xddcloud-auth')
    params.append('client_secret', 'xddcloud-secret')
    params.append('scope', 'server')
    params.append('username', user.account) // 您可以根据需要修改为 user.account
    params.append('password', user.password)
    params.append('grant_type', 'password')
    params.append('request_type','user')
    loading.value = true // 显示加载状态
    try {
        let res = await login(params)
        setLocalUser(res.access_token) // 缓存
        router.push({ name: 'Main' })
    } catch (error) {
        console.error('Request error:', error.response.data)
        ElMessage.error(error.response.data.error)
    }
    loading.value = false
}

// 忘记密码
const handleLinkForgot = () => {
    router.push({ name: 'Forgot' })
}

onMounted(() => {})
</script>
<style lang="scss" scoped>
.login {
    background: url('/images/login/login-back.png') no-repeat;
    background-color: #4788df;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: relative;

    .login-box {
        border-radius: 8px;
        width: 740px;
        height: 400px;
        z-index: 3;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;

        .login-title {
            width: 370px;
            height: 100%;
            background: linear-gradient(
                143deg,
                rgba(255, 255, 255, 0.6) 0%,
                rgba(69, 139, 225, 0.5) 100%
            );
            border-radius: 10px 0 0 10px;
            display: flex;
            align-items: center;
            justify-content: center;

            .content {
                display: inline-block;
                text-align: left;
                user-select: none;

                .welcome {
                    font-size: 36px;
                    color: #ffffff;
                    line-height: 50px;
                    font-weight: bold;
                }

                .name {
                    font-size: 30px;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 42px;
                    padding-top: 12px;
                }
            }
        }

        .login-form {
            flex: 1;
            height: 100%;
            background: #ffffff;
            border-radius: 0 10px 10px 0;
            display: flex;
            align-items: center;

            .el-form {
                width: 86%;
                margin: 0 auto;
            }
        }
    }
}
</style>
